import React, { FC, useEffect } from "react"
import { styled } from "@mui/material/styles"
import { Box, Typography, Container, Grid, Card, Paper, useTheme } from "@mui/material"
import { APP_BAR_MOBILE } from "../../layouts/DefaultLayout"
import TTech from "../../components/TTech"

const ZmoWebProjectContainer = styled(Box)(({ theme }) => ({
  paddingTop: APP_BAR_MOBILE + 20 + "px",
}))

const ZmoWebProjectImage1 = styled("img")(({ theme }) => ({
  [theme.breakpoints.up("xs")]: {
    width: "100%",
  },
  [theme.breakpoints.up("md")]: {
    width: "70%",
  },
  [theme.breakpoints.up("lg")]: {
    width: "90%",
  },
}))

const Projects: FC = () => {
  const theme = useTheme()

  return (
    <ZmoWebProjectContainer>
      <Container maxWidth="xl" sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
        <Typography variant="h2" align="center" sx={{ marginBottom: "20px" }}>
          AI算法智能生成项目
        </Typography>
        <Typography variant="h4" align="center" sx={{ marginTop: "30px" }}>
          项目介绍
        </Typography>
        <Box sx={{ width: "40px", borderBottom: "2px #333 solid", margin: "5px 0 20px" }} />
        <Typography
          variant="body2"
          align="left"
          sx={{
            maxWidth: {
              xs: "95%",
              sm: "90%",
              md: "70%",
            },
            marginBottom: "20px",
          }}
        >
          算法生成虚拟模特, 用户通过web端挑选合适的模特, 然后上传衣服图片, 选择衣服朝向与光照朝向, 即可通过算法智能去除背景, 如果用户对去除效果不满意, 可以手动编辑抠图结果, 用户提交产品的图片以后,
          算法会生成衣服穿着在模特身上的效果图
        </Typography>
        <ZmoWebProjectImage1 src="/static/zmoweb1.png" />
        <Typography variant="h4" align="center" sx={{ marginTop: "100px" }}>
          技术栈
        </Typography>
        <Box sx={{ width: "40px", borderBottom: "2px #333 solid", margin: "5px 0 20px" }} />
        <Box sx={{ textAlign: "center" }}>
          <TTech title="Typescript" color="#274f7d" sx={{ marginRight: "10px", marginBottom: "10px" }} />
          <TTech title="qiankun" color="#5e53a1" sx={{ marginRight: "10px", marginBottom: "10px" }} />
          <TTech title="Vite" color="#5f6ff8" sx={{ marginRight: "10px", marginBottom: "10px" }} />
          <TTech title="Vue3.0" color="#44b787" sx={{ marginRight: "10px", marginBottom: "10px" }} />
          <TTech title="Pinia" color="#ffd564" sx={{ marginRight: "10px", marginBottom: "10px" }} />
          <TTech title="Naive UI" color="#37a96f" sx={{ marginRight: "10px", marginBottom: "10px" }} />
          <TTech title="Bootstrap" color="#7655ae" sx={{ marginRight: "10px", marginBottom: "10px" }} />
          <TTech title="i18n" color="#5baca5" sx={{ marginRight: "10px", marginBottom: "10px" }} />
        </Box>
        <Typography variant="h4" align="center" sx={{ marginTop: "100px" }}>
          功能亮点
        </Typography>
        <Box sx={{ width: "40px", borderBottom: "2px #333 solid", margin: "5px 0 20px" }} />
        <Grid container direction="row" spacing={2} alignItems="flex-start">
          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Paper sx={{ padding: theme.spacing(4), height: { xs: "auto", sm: "200px" } }}>
              <Typography variant="h4" gutterBottom>
                微前端支持
              </Typography>
              <Typography variant="body2" sx={{ color: theme.palette.grey[500] }}>
                支持独立部署, 也支持作为微前端子应用访问
              </Typography>
            </Paper>
          </Grid>

          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Paper sx={{ padding: theme.spacing(4), height: { xs: "auto", sm: "200px" } }}>
              <Typography variant="h4" gutterBottom>
                Typescript支持
              </Typography>
              <Typography variant="body2" sx={{ color: theme.palette.grey[500] }}>
                使用ts语法, 提高程序可维护性; 使用vue3 setup语法糖, 减少冗余代码
              </Typography>
            </Paper>
          </Grid>

          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Paper sx={{ padding: theme.spacing(4), height: { xs: "auto", sm: "200px" } }}>
              <Typography variant="h4" gutterBottom>
                Vite构建
              </Typography>
              <Typography variant="body2" sx={{ color: theme.palette.grey[500] }}>
                使用Vite构建工具, 提高开发是编译速度
              </Typography>
            </Paper>
          </Grid>

          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Paper sx={{ padding: theme.spacing(4), height: { xs: "auto", sm: "200px" } }}>
              <Typography variant="h4" gutterBottom>
                国际化支持
              </Typography>
              <Typography variant="body2" sx={{ color: theme.palette.grey[500] }}>
                支持中英文语言切换
              </Typography>
            </Paper>
          </Grid>

          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Paper sx={{ padding: theme.spacing(4), height: { xs: "auto", sm: "200px" } }}>
              <Typography variant="h4" gutterBottom>
                多环境区分
              </Typography>
              <Typography variant="body2" sx={{ color: theme.palette.grey[500] }}>
                为不同环境配置自动区分API路径, S3路径
              </Typography>
            </Paper>
          </Grid>

          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Paper sx={{ padding: theme.spacing(4), height: { xs: "auto", sm: "200px" } }}>
              <Typography variant="h4" gutterBottom>
                数据自动持久化
              </Typography>
              <Typography variant="body2" sx={{ color: theme.palette.grey[500] }}>
                使用pinia-plugin-persist插件为全局共享状态做持久化, 一键配置, 无需手动管理
              </Typography>
            </Paper>
          </Grid>

          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Paper sx={{ padding: theme.spacing(4), height: { xs: "auto", sm: "200px" } }}>
              <Typography variant="h4" gutterBottom>
                响应式布局
              </Typography>
              <Typography variant="body2" sx={{ color: theme.palette.grey[500] }}>
                使用Bootstrap栅格系统, 为不同尺寸的PC Screen做适配
              </Typography>
            </Paper>
          </Grid>

          <Grid item xs={12} sm={6} md={4} lg={3}>
            <Paper sx={{ padding: theme.spacing(4), height: { xs: "auto", sm: "200px" } }}>
              <Typography variant="h4" gutterBottom>
                代码一致性
              </Typography>
              <Typography variant="body2" sx={{ color: theme.palette.grey[500] }}>
                使用eslint, stylelint保证代码规范, 使用husky, pre-commit, commit-lint保证做提交校验, 保证代码一致性, commit规范
              </Typography>
            </Paper>
          </Grid>
        </Grid>

        <Typography variant="h4" align="center" sx={{ marginTop: "100px" }}>
          功能展示
        </Typography>
        <Box sx={{ width: "40px", borderBottom: "2px #333 solid", margin: "5px 0 20px" }} />
      </Container>

      <Box
        sx={{
          width: "100%",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          overflow: "hidden",
          maxWidth: theme.breakpoints.values.xl,
          margin: "0 auto 50px",
          marginBottom: {
            lg: "100px",
          },
        }}
      >
        <Box
          sx={{
            flexShrink: 0,
            marginLeft: {
              xs: theme.spacing(6),
              sm: theme.spacing(8),
              md: theme.spacing(10),
              lg: theme.spacing(18),
              xl: theme.spacing(18),
            },
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "flex-start",
            flexGrow: 1,
            maxWidth: "40%",
            transform: {
              md: "scale(1.2)",
              lg: "scale(1.5)",
            },
          }}
        >
          <Typography variant="h4">01 / 一键换脸</Typography>
          <Typography variant="body2" sx={{ color: theme.palette.grey[500] }}>
            支持用户上传私人脸库, 一键换脸, 生成自己的专属模特
          </Typography>
        </Box>
        <Box
          component="img"
          src="/static/zmoweb2.png"
          alt="zmoweb"
          sx={{
            width: {
              xs: "60%",
              xl: "65%",
            },
            transform: {
              xs: "translateX(10%)",
              lg: "translateX(15%)",
            },
            flexShrink: 0,
          }}
        />
      </Box>

      <Box
        sx={{
          width: "100%",
          display: "flex",
          justifyContent: "space-between",
          flexWrap: "nowrap",
          alignItems: "center",
          overflow: "hidden",
          maxWidth: theme.breakpoints.values.xl,
          margin: "0 auto",
          marginBottom: {
            xs: "60px",
          },
        }}
      >
        <Box
          component="img"
          src="/static/zmoweb3.png"
          alt="zmoweb"
          sx={{
            width: {
              xs: "60%",
              xl: "65%",
            },
            transform: {
              xs: "translateX(-20%)",
            },
            flexShrink: 0,
          }}
        />

        <Box
          sx={{
            paddingRight: {
              xs: theme.spacing(3),
              sm: theme.spacing(9),
              md: theme.spacing(1),
            },
            display: "flex",
            justifyContent: "center",
            flexDirection: "column",
            alignItems: "flex-end",
            flexGrow: 1,
            flexShrink: 0,
            maxWidth: "40%",
            transform: {
              md: "translateX(-30%) scale(1.2)",
              lg: "translateX(-30%) scale(1.5)",
            },
          }}
        >
          <Typography variant="h4">02 / 拖拽上传衣服图</Typography>
          <Typography variant="body2" sx={{ color: theme.palette.grey[500] }}>
            拖拽图片进应用, 一键上传到AWS-S3
          </Typography>
        </Box>
      </Box>

      <Box
        sx={{
          width: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          overflow: "hidden",
          maxWidth: theme.breakpoints.values.xl,
          margin: "0 auto",
          marginBottom: {
            lg: "100px",
          },
        }}
      >
        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            flexDirection: "column",
            alignItems: "center",
            maxWidth: "40%",
            padding: {
              xs: "20px 0",
              md: "50px 0"
            },
            transform: {
              md: "scale(1.2)",
              lg: "scale(1.5)",
            },
          }}
        >
          <Typography variant="h4">03 / 拖拽上传衣服图</Typography>
          <Typography variant="body2" sx={{ color: theme.palette.grey[500] }}>
            拖拽图片进应用, 一键上传到AWS-S3
          </Typography>
        </Box>

        <Box
          component="img"
          src="/static/zmoweb3.png"
          alt="zmoweb"
          sx={{
            width: {
              xs: "60%",
              xl: "65%",
            },

            flexShrink: 0,
          }}
        />
      </Box>
    </ZmoWebProjectContainer>
  )
}

export default Projects
